<template>
<div>
<div>
  <el-input  v-model="keyWords" @keydown.enter.native="adminSearch"  placeholder="搜索用户" prefix-icon="el-icon-search" style="width: 400px;margin:10px 5px"></el-input>
  <el-button icon="el-icon-search" type="primary" @click="adminSearch">搜索</el-button>
</div>
  <div class="contarinCar">
    <el-card class="box-card" v-for="(item,index) in admins" :key="index" >
      <div slot="header" class="clearfix">
        <span>{{item.name}}</span>
        <el-button type="danger" style="float: right" size="mini" icon="el-icon-delete" circle @click="deletAdmin(item)"></el-button>
      </div>
      <div>
        <div class="marg">{{'手机号:'+item.phone}}</div>
        <div class="marg">{{'电话:'+item.telephone}}</div>
        <div class="marg">{{'地址:'+item.address}}</div>
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="权限" name="1">
          <div style="display: flex;justify-content: flex-start;align-items: center">
            <span style="margin-right: 10px">职位:</span>
            <div v-for="(item,index) in item.roles" :key="index">
              <el-tag size="mini">{{item.nameZh}}</el-tag>&nbsp;
            </div>
            <el-popover
                placement="bottom"
                title="标题"
                width="200"
                trigger="click"
                content="..."
                 @hide="updataRoles(item)" >
              <el-select v-model="seletRole" multiple placeholder="请选择">
                <el-option
                    v-for="(item,index) in allRoles"
                    :key="index"
                    :label="item.nameZh"
                    :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button slot="reference" size="medium" type="text" icon="el-icon-edit"  @click="showAllRoles(item)"></el-button>
            </el-popover>
          </div>
        </el-collapse-item>
        <div style="margin:10px 0">
          <span style="margin-right: 5px">是否启用:</span>
          <el-switch
              v-model="item.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="activeAdmin(item)">
          </el-switch>
        </div>
      </el-collapse>
    </el-card>
  </div>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "SysConfig",
  data(){
    return {
      keyWords:'',
      admins:[],
      allRoles:[],
      seletRole:[],

    }
  },
  methods:{
    updataRoles(item){
      let url = 'api/system/admin/role?adminId='+item.id;
      this.seletRole.forEach(r=>{
        url+='&rids='+r
      })
      axios({
        method:'put',
        url:url
      }).then(res=>{
        if(res){
          this.initadmins()
        }
      })
    },
    showAllRoles(item){
      this.initAllRoules();
      let roles = item.roles;
      this.seletRole=[];
      roles.forEach(r=>{
        this.seletRole.push(r.id)
      });
    },
    initAllRoules(){
      axios({
        method:'get',
        url:'api/system/admin/roles'
      }).then(res=>{
        if(res){
          this.allRoles = res.data
        }
      })
    },
    activeAdmin(item){
      axios({
        method:'put',
        url:'api/system/admin/',
        data:item
      }).then(res=>{
        if(res){
          this.initadmins();
        }
      })
    },
    deletAdmin(item){
      this.$confirm(`此操作将永久删除${item.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method:'delete',
          url:`/system/admin/${item.id}`
        })
        this.initadmins();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    adminSearch(){
      axios({
        method:'get',
        url:'api/system/admin/?keyword='+this.keyWords
      }).then(res=>{
        if(res){
          this.admins = res.data
        }
      })
    },
    initadmins(){
      axios({
        method:'get',
        url:'api/system/admin/'
      }).then(res=>{
        this.admins = res.data;
      })
    }
  },
  mounted() {
    this.initadmins()
  }
}
</script>

<style scoped>
.adminFace{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.box-card{
  width: 48%;
  margin-bottom: 10px;
}
.contarinCar {

  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.marg{
  margin-bottom: 4px;
}
</style>